<template>
    <div
      v-if="searchSetting.length"
      ref="searchContent"
      class="search-content"
      :style="{ background: backColor }"
    >
      <a-form v-if="searchSetting.length" ref="searchForm" :model="searchModel" :layout="namePlace">
        <div class="form-left">
          <a-form-item v-for="(item, index) in searchSetting" :key="index">
            <template #label>
              <span class="label-info" :style="titleStyles(item.textStyle)">{{
                item.fieldLabel
              }}</span>
            </template>
            <search-component
              :option-data="item"
              :dataSourceId="dataSourceId"
              :type="item.fieldType"
              :field-id="item.fieldValue"
              :getPageColumnValue="getPageColumnValue"
              :value="searchModel[item.fieldValue]"
              @change="(newValue) => attributeChange(newValue, item)"
            />
          </a-form-item>
          <div class="form-right">
            <a-button type="primary" v-if="showSearch" class="mr24" @click="onSearchSubmit">
              搜索
            </a-button>
            <a-button @click="resetForm" v-if="showReset"> 重置 </a-button>
          </div>
        </div>
      </a-form>
    </div>
  </template>
  <script>
    import { defineComponent, ref, watch } from 'vue';
    import SearchComponent from '@/components/table/SearchComponent.vue';
  
    export default defineComponent({
      name: 'SearchForm',
      components: {
        SearchComponent,
      },
      props: {
        searchSetting: {
          type: Array,
        },
        showReset: {
          type: Boolean,
          default: () => {
            return false;
          },
        },
        showSearch: {
          type: Boolean,
          default: () => {
            return false;
          },
        },
        dataSourceId: {
          type: Number,
        },
        getPageColumnValue: {
          type: Function,
        },
        backColor: {
          type: String,
          default: () => {
            return '#ffffff';
          },
        },
        namePlace: {
          type: String,
        },
      },
      emits: ['searchForm'],
      setup(props, { emit }) {
        const alignType = {
          ALIGN_LEFT: 'left',
          ALIGN_CENTER: 'center',
          ALIGN_RIGHT: 'right',
        };
        const onSearchSubmit = () => {
          emit('searchForm', searchModel.value);
        };
        const resetForm = () => {
          props.searchSetting.forEach((item) => {
            if (item.fieldType === 'dateSection') {
              searchModel.value[item.fieldValue] = [];
            } else {
              searchModel.value[item.fieldValue] = undefined;
            }
          });
          emit('searchForm', searchModel.value);
        };
        const attributeChange = (newValue, childItem) => {
          searchModel.value[childItem.fieldValue] = newValue;
        };
        const titleStyles = (item) => {
          const { fontSize, color, bold, italic, underline, align } = item;
          const ret = {
            fontSize: `${fontSize}px`,
            color,
            textAlign: alignType[align],
            fontWeight: bold ? 'bold' : 'normal',
            textDecoration: underline ? 'underline' : 'none',
            fontStyle: italic ? 'italic' : 'initial',
          };
          return ret;
        };
  
        const searchModel = ref({});
        watch(
          () => props.searchSetting,
          (newValue) => {
            newValue.forEach((item) => {
              searchModel.value[item.fieldValue] = '';
            });
          },
        );
        return {
          titleStyles,
          onSearchSubmit,
          searchModel,
          resetForm,
          attributeChange,
        };
      },
    });
  </script>
  
  <style lang="less" scoped>
    .search-content {
      padding: 24px 24px 0px 8px;
      border-radius: 8px;
      margin-bottom: 16px;
    }
  
    .search-content .@{ant-prefix}-form {
      display: flex;
    }
  
    .search-content .@{ant-prefix}-form .form-left {
      flex: 1;
    }
  
    .search-content .@{ant-prefix}-form .@{ant-prefix}-form-item {
      min-width: 10%;
      width: calc(25% - 16px);
      float: left;
      padding-right: 12px;
      margin-left: 16px;
      margin-bottom: 24px;
    }
  
    .search-content
      .@{ant-prefix}-form
      .@{ant-prefix}-form-item
      :deep(.@{ant-prefix}-form-item-control-wrapper) {
      flex: 1;
    }
  
    .mr24 {
      margin-right: 24px;
    }
  
    .search-content .@{ant-prefix}-form .label-info {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-align: right;
      max-height: 32px;
      width: 112px;
      line-height: 16px;
      margin-top: -5px;
      vertical-align: middle;
    }
  
    .search-content .@{ant-prefix}-form .form-right {
      float: right;
      padding-top: 3px;
      margin-bottom: 16px;
      margin-right: 12px;
    }
  
    .@{ant-prefix}-form-horizontal .@{ant-prefix}-form-item {
      display: flex;
      align-items: center;
    }
  
    .@{ant-prefix}-form-vertical.@{ant-prefix}-form-item-label {
      display: block;
      white-space: normal;
      text-align: left;
    }
  </style>
  